import React, { useRef, useEffect, useMemo } from 'react';
import * as echarts from 'echarts';

const LineChart = ({ type = '50', title = '', data = [], title1 = '', data1 = [], title2 = '', data2 = [], mainTitle = '' }) => {
    const chartRef = useRef(null);
    const serive = []
    data?.length && serive.push({
        name: title,
        data: data?.map((item) => {
            return item?.cookTimes || item?.cookSpecCopies || item?.timeCost || item?.value || 0
        }),
        title: data?.map((item) => {
            return item?.eventDate || item?.date
        }),
        type: 'line',
        lineStyle: {
            color: 'rgb(137,121,255)', // 改变折线的颜色，这里设置为红色，你可以根据需要修改
            width: 1.5, // 改变折线的宽度，你可以根据需要修改
            shadowBlur: 10, // 阴影模糊程度
            shadowColor: 'rgb(137,121,255)', // 阴影颜色
            shadowOffsetX: 8, // 阴影水平偏移量
            shadowOffsetY: 5 // 阴影垂直偏移量
        },
        smooth: true,
        symbolSize: 6,
        symbol: 'circle', // 明确指定符号为圆形
        itemStyle: {
            borderWidth: 1,
            borderColor: 'rgb(137,121,255)',
            color: '#fff',
            // color: 'transparent' // 填充颜色设为透明，突出边框
        }
    })
    data1?.length && serive.push({
        name: title1,
        data: data1?.map((item) => {
            return item?.cookTimes || item?.cookSpecCopies || item?.timeCost || item?.value || 0
        }),
        title: data1?.map((item) => {
            return item?.eventDate || item?.date
        }),
        type: 'line',
        lineStyle: {
            color: 'rgb(255,146,138)', // 改变折线的颜色，这里设置为红色，你可以根据需要修改
            width: 1.5, // 改变折线的宽度，你可以根据需要修改
            shadowBlur: 10, // 阴影模糊程度
            shadowColor: 'rgb(255,146,138)', // 阴影颜色
            shadowOffsetX: 8, // 阴影水平偏移量
            shadowOffsetY: 5 // 阴影垂直偏移量
        },
        smooth: true,
        symbolSize: 6,
        symbol: 'circle', // 明确指定符号为圆形
        itemStyle: {
            borderWidth: 1,
            borderColor: 'rgb(255,146,138)',
            color: '#fff',
            // color: 'transparent' // 填充颜色设为透明，突出边框
        }
    })
    data2?.length && serive.push({
        name: title2,
        data: data2?.map((item) => {
            return item?.cookTimes || item?.cookSpecCopies || item?.timeCost || item?.value || 0
        }),
        title: data2?.map((item) => {
            return item?.eventDate || item?.date || '-'
        }),
        type: 'line',
        lineStyle: {
            color: 'cyan', // 改变折线的颜色，这里设置为红色，你可以根据需要修改
            width: 1.5, // 改变折线的宽度，你可以根据需要修改
            shadowBlur: 10, // 阴影模糊程度
            shadowColor: 'cyan', // 阴影颜色
            shadowOffsetX: 8, // 阴影水平偏移量
            shadowOffsetY: 5 // 阴影垂直偏移量
        },
        smooth: true,
        symbolSize: 6,
        symbol: 'circle', // 明确指定符号为圆形
        itemStyle: {
            borderWidth: 1,
            borderColor: 'cyan',
            color: '#fff',
            // color: 'transparent' // 填充颜色设为透明，突出边框
        }
    })
    console.log(data2?.length)
    const chartOptions = useMemo(() => {
        return {
            title: mainTitle && {
                text: mainTitle, // 设置主标题文本
                left: 'center', // 标题居中显示
                top: '5%', // 标题距离顶部 5% 的位置
                textStyle: {
                    fontSize: '14px', // 设置主标题字体大小
                }
            },
            grid: {
                left: '3%', // 图表距离容器左侧的距离
                right: '3%', // 图表距离容器右侧的距离
                top: title1 ? '20%' : '10%', // 图表距离容器顶部的距离
                bottom: '15%', // 图表距离容器底部的距离
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: data?.map((item) => {
                    return item?.eventDate || item?.date
                }),
                axisLine: {
                    lineStyle: {
                        type: 'solid', // 将 x 轴线条设置为虚线
                        color: 'rgb(179,179,187)'
                    }
                },
                axisTick: {
                    show: false, // 去掉 x 轴刻度线（间隔线段）
                },
                splitLine: {
                    show: true, // 显示 x 轴刻度线
                    lineStyle: {
                        type: 'dashed' // 将 x 轴刻度线设置为虚线
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        type: 'solid' // 将 x 轴线条设置为虚线
                    }
                },
                splitLine: {
                    show: true, // 显示 y 轴刻度线
                    lineStyle: {
                        type: 'dashed' // 将 y 轴刻度线设置为虚线
                    }
                }
            },
            legend: {
                data:  [title, title1,title2], // 图例的数据，与 series 中的名称对应
                bottom: 10, // 将图例置于底部
                orient: 'horizontal' // 图例水平排列
            },
            tooltip: {
                trigger: 'axis' // 触发类型为坐标轴触发
            },
            series: serive
    }}, [data,data1,data2]);

    useEffect(() => {
        const myChart = echarts.init(chartRef?.current);
        if (chartOptions) {
            myChart.setOption(chartOptions);
        }

        // 监听窗口大小变化并重新绘制图表
        const handleResize = () => {
            myChart?.resize();
        };
        window.addEventListener('resize', handleResize);

        return () => {
            window.removeEventListener('resize', handleResize);
            myChart?.dispose();
        };
    }, [chartOptions]);

    return <div ref={chartRef} style={{ width: type === '50' ? '49%' : '100%', height: '240px', backgroundColor: '#fff', borderRadius: '8px', border: '1px solid rgb(234, 236, 240)' }} />
};

export default LineChart;
